<template>
	<view>
		<!-- 头部标签栏 -->
		<view class="tab">
			<view class="tab-item" v-for="(item, i) in list" :key="i" @click="choose(item)">
				<view class="item" :class="[current.param==item.param?'activited':'']">
					{{item.title}}
				</view>
			</view>
		</view>
		<!-- 出差申请模块 -->
		<view class="travelView">
			<view class="travelBox" v-for="(item,i) in currentMes" :key="i" @click="ToDetail(item)">
				<view class="boxTop">
					<view class='boxName'>
						{{item.orderType == 1 ? '机票': item.orderType == 2 ? '火车票':item.orderType == 3 ? '酒店' : ''}}
						{{item.orderType ? '超标' : '' }}
					</view>
					<image v-if="item.approveStatus=='03'" class='boxType' src="../../static/index/shenpi.png"></image>
					<image v-if="item.approveStatus=='07'" class='boxType' src="../../static/index/yibohui.png"></image>
					<image v-if="item.approveStatus=='04'" class='boxType' src="../../static/index/yitongguo.png"></image>
					<!-- <image v-if="item.approveStatus=='02'" class='boxType' src="../../static/index/yichehui.png"></image>
					<image v-if="item.approveStatus=='08'" class='boxType' src="../../static/index/yiquxiao.png"></image> -->
				</view>
				<view class="boxMiddle">
					<view class="middleItem">
						<view class="leftItem">申请原因</view>
						<view class="rightItem reason">{{item.reasonDesc}}</view>
					</view>
					<view class="middleItem">
						<view class="leftItem">超标人员</view>
						<view class="rightItem reason">{{item.travelStaffName}}</view>
					</view>
					<view class="middleItem">
						<view class="leftItem">超标原因</view>
						<view class="rightItem reason">{{item.warningMessage}}</view>
					</view>
				</view>
				<view class="boxBottom">
					<view class="middleItem">
						<view class="leftItem">{{item.applicationId}}</view>
						<view class="rightItem">{{item.applicationTime.slice(5)}}</view>
					</view>
				</view>
				<view v-if="item.approveStatus=='04'" class="placeAnOrder" @click.stop="createOrder(item)">立即下单
					<image class='boxType' src="../../static/index/rightIcon.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { findOverStandardApprovePage } from "@/api/reimburseApply.js";
import trainVue from '../order/train.vue';
	export default {
		data() {
			return {
				current: {
					title: '全部',
					param: ''
				},
				list: [{
					title: '全部',
					param: ''
				}, {
					title: '审批中',
					param: '03'
				}, {
					title: '已通过',
					param: '04'
				}, {
					title: '已驳回',
					param: '07'
				}],
				// }, {
				// 	title: '已撤回',
				// 	param: 4
				// }, {
				// 	title: '已取消',
				// 	param: 5
				// }],
				travelMes: [],
				currentMes: []
			}
		},
		components: {

		},
		created() {
			console.log(123)
			this.findOverStandardApprovePage();
		},
		methods: {
			//点击头部tab栏切换
			choose(arg) {
				this.current = arg
				this.getCurrentMes(arg.param)
			},
			//重置当前数组
			getCurrentMes(res) {
				if (res == 0) {
					this.currentMes = JSON.parse(JSON.stringify(this.travelMes))
				} else {
					this.currentMes = this.travelMes.filter(ite => {
						return ite.approveStatus == res
					})
				}
			},
			async findOverStandardApprovePage() {
				console.log(43)
				const res = await findOverStandardApprovePage();
				if (res[1] && res[1].data) {
					console.log(res[1].data)
					this.travelMes = res[1].data;
					this.currentMes = JSON.parse(JSON.stringify(this.travelMes))
				}
			},
			createOrder(params) {
				console.log(params,123)
				let path = "plane";
				if(params.orderType==2){
					path = 'train'
				};
				if(params.orderType==3){
					path = 'hotel'
				};
				uni.navigateTo({
					url: '/pages/order/'+path,
				});
			},
			ToDetail(params) {
				//console.log(params,1111)
				let path =
				"trainOverApproveD?applicationId=" +
				params.applicationId +
				"&taskRecordId=" +  
				params.taskRecordId +
				"&travelApplId=" +
				params.travelApplId +
				"&approveStatus=" +
				params.approveStatus+
				"&approveOrderType="+
				params.orderType+
				'&isWebView=1'
				uni.navigateTo({
					url: "/pages/webViewh5/index?path=" + encodeURIComponent(path),
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tab {
		height: 90rpx;
		line-height: 110rpx;
		//overflow-x: auto;
		//overflow-y: hidden;
		white-space: nowrap;
		font-size: 32rpx;
		background: #ffffff;
		padding:0px 50rpx;
	}

	// ::-webkit-scrollbar {
	// 	display: none;
	// 	width: 0 !important;
	// 	height: 0 !important;
	// 	-webkit-appearance: none;
	// 	background: transparent;
	// }

	.tab-item {
		display: inline-block;
		margin-right:100rpx;
		&:last-child{
			margin-right:0rpx;
		}
	}

	.item {
		color: #666;
		height: 85rpx;
	}

	.activited {
		color: #FFA900;
		border-bottom: 4rpx solid #FFA900;
	}

	.travelView {
		min-height: 89vh;
		background: #f7f7f7;
		padding: 30rpx 32rpx 120rpx 32rpx;
	}

	.travelBox {
		box-sizing: border-box;
		width: 686rpx;
		// height: 403rpx;
		background: #fff;
		margin-bottom: 30rpx;
		border-radius: 30rpx;
		box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(0, 0, 0, 0.08),
			0rpx 3rpx 30rpx 0rpx rgba(0, 0, 0, 0.02);

		.boxTop {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 90rpx;
			margin: 0 32rpx;
			border-bottom: 1rpx solid #e5e5e5;

			.boxName {
				font-size: 32rpx;
				font-weight: 500;
			}

			.boxType {
				width: 94rpx;
				height: 40rpx;
			}
		}

		.boxMiddle {
			box-sizing: border-box;
			height: 210rpx;
			margin: 0 32rpx;
			border-bottom: 1rpx solid #e5e5e5;
		}

		.middleItem {
			padding-top: 24rpx;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;

			.leftItem {
				color: #666;
			}

			.rightItem {
				color: #333;
			}
			.reason{
				max-width: 450rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.boxBottom {
			margin: 0 32rpx;
			padding-bottom: 40rpx;
		}
		.placeAnOrder{
			padding-bottom: 40rpx;
			height: 28rpx;
			font-size: 28rpx;
			text-align: center;
			color: #FFA900;
			.boxType{
				margin-left: 17rpx;
				width: 14rpx;
				height: 24rpx;
			}
		}
	}
</style>
